/* 改变主题色变量 */
$--color-primary: #008fdb;

$--color-success: #00B42A;

$--color-waring: #FF7D00;

$--color-danger: #F53F3F;

$--color-text-regular: #000000;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

// 按钮

.el-button {
    &:hover,
    &:focus {
        color: var(--main-color);
        background-color: var(--auxiliary-color-link-bg-10);
        border-color: var(--auxiliary-color-btn-bg-30)
    }
    &:active {
        color: var(--main-color);
        border-color: var(--main-color);
    }
}
.el-button--primary {
    background-color: var(--main-color);
    border-color: var(--main-color);
    &:hover,
    &:focus {
        color: #ffffff;
        background: var(--auxiliary-color-link);
        border-color: var(--auxiliary-color-link)
    }
    &:active {
        color: #ffffff;
        background: var(--auxiliary-color-btn);
        border-color: var(--auxiliary-color-btn);
    }
    &.is-disabled {
        background-color: var(--main-color);
        border-color: var(--main-color);
        opacity: 0.65;
        &:hover {
            background-color: var(--main-color);
            border-color: var(--main-color);
            opacity: 0.65;
        }
    }
}

.el-button--primary.is-plain {
    color: var(--main-color);
    background-color: var(--auxiliary-color-link-bg-10);
    border-color: var(--auxiliary-color-btn-bg-30);

    &:hover,
    &:focus {
        background: var(--main-color);
        border-color: var(--main-color)
    }
    &:active {
        background: var(--auxiliary-color-btn);
        border-color: var(--auxiliary-color-btn);
    }
    &.is-disabled {
        color: var(--main-color);
        background-color: var(--auxiliary-color-link-bg-10);
        border-color: var(--auxiliary-color-btn-bg-30);
        opacity: 0.65;
        &:hover {
            color: var(--main-color);
            background-color: var(--auxiliary-color-link-bg-10);
            border-color: var(--auxiliary-color-btn-bg-30);
            opacity: 0.65;
        }
    }
}

.el-button--text {
    padding: 0;
    color: var(--main-color);
    &:hover,
    &:focus {
        color: var(--auxiliary-color-link);
        border-color: transparent;
        background-color: transparent;
    }
    &:active {
        color: var(--auxiliary-color-btn);
        border-color: transparent;
        background-color: transparent;
    }
}

// 多选框
.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: var(--main-color);
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

// 单选框
.el-radio__input.is-checked .el-radio__inner {
    border-color: var(--main-color);
    background: var(--main-color);
}

.el-radio__input.is-checked + .el-radio__label {
    color: var(--main-color);
}

// 输入框
.el-input__inner,
.ivu-input,
.ivu-input-number-input,
.ivu-input-number {
    &:focus {
        border-color: var(--main-color) !important;
        box-shadow: none !important;
    }
    &:hover {
        border-color: var(--main-color) !important;
        box-shadow: none !important;
    }
    font-size: 16px !important;
}

.el-input__prefix {
    line-height: 1;
}
.el-textarea__inner {
    font-size: 16px;
    &:focus {
        border-color: var(--main-color);
    }
}
// 时间选择
.el-picker-panel__icon-btn:hover {
    color: var(--main-color);
}
.el-date-picker__header-label:hover {
    color: var(--main-color);
}
.el-date-table td.today span {
    color: var(--main-color);
}
.el-date-table td.available:hover {
    color: var(--main-color);
}
.el-date-table td.current:not(.disabled) span {
    background-color: var(--main-color);
}

.el-range-editor--small .el-range-input {
    font-size: 16px;
}


// 下拉单选菜单
.el-select .el-input__inner:focus {
    border-color: var(--main-color);
}
.el-select .el-input.is-focus .el-input__inner {
    border-color: var(--main-color);
}
.el-select-dropdown__item.selected {
    color: var(--main-color);
}


// 下拉多选菜单
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    color: var(--main-color);
}

.el-loading-mask {
    background-color: rgba(255, 255, 255, 0.65);
    z-index: 1000;
}

.hf-popper-submenu {
    .el-menu--popup-right-start {
        background: #ffffff;
        border: 1px solid rgba(153, 163, 179, 0.13);
        border-radius: 4px;
        box-shadow: 0px 2px 10px rgba(185, 194, 208, 0.2);
    
        .el-menu-item {
            margin: 0 8px 4px 8px;
            border-radius: 4px;
            height: 44px;
            line-height: 44px;
        }
    
        .el-menu-item:hover, .el-menu-item:focus {
            background: linear-gradient(270deg, var(--auxiliary-color-btn) 2.63%, var(--main-color) 100%);
            color: #FFFFFF !important;
        }
    
        .el-menu-item.is-active {
            background: linear-gradient(270deg, var(--auxiliary-color-btn) 2.63%, var(--main-color) 100%);
            i {
                color: #FFFFFF;
            }
        }
    }
}

.hf-popper-submenu-tiny {
    .el-menu--popup-right-start {
        background: #ffffff;
        border: 1px solid rgba(153, 163, 179, 0.13);
        border-radius: 4px;
        box-shadow: 0px 2px 10px rgba(185, 194, 208, 0.2);
    
        .el-menu-item {
            margin: 0 8px 4px 8px;
            border-radius: 4px;
            height: 40px;
            line-height: 40px;
        }
    
        .el-menu-item:hover, .el-menu-item:focus {
            background: linear-gradient(270deg, var(--auxiliary-color-btn) 2.63%, var(--main-color) 100%);
            color: #FFFFFF !important;
        }
    
        .el-menu-item.is-active {
            i {
                color: #FFFFFF;
            }
    
            background: linear-gradient(270deg, var(--auxiliary-color-btn) 2.63%, var(--main-color) 100%);
        }
    }
}
